<template>
  <view class="my-userinfo-container">

    <!-- 头像昵称区域 -->
    <view class="top-box">
      <image :src="userinfo.userInfo.avatarUrl" class="avatar"></image>
      <view class="nickname">{{userinfo.userInfo.nickName}}</view>
    </view>

	<!-- 第一层 -->
	<view class="panel-list1">
		<view class="panel-item1">
			<view class="item1">
				<text>8</text>
				<text>收藏的店铺</text>
			</view>
			<view class="item1">
				<text>14</text>
				<text>收藏的商品</text>
			</view>
			<view class="item1">
				<text>0</text>
				<text>关注的店铺</text>
			</view>
			<view class="item1">
				<text>86</text>
				<text>我的足迹</text>
			</view>
		</view>
	</view>
	
	<!-- 第二层视图 -->
	
	<view class="panel-list2">
		<view class="panel-item2">
			<view class="panel-title2">
				我的订单
			</view>
			<view class="panel-order">
				<u-icon name="calendar" labelPos="bottom" size="35" labelSize="12" label="待付款"></u-icon>
				<u-icon name="car" labelPos="bottom" size="35" labelSize="12" label="待收货"></u-icon>
				<u-icon name="rmb-circle" labelPos="bottom" size="35" labelSize="12" label="退款/退货"></u-icon>
				<u-icon name="order" labelPos="bottom" size="35" labelSize="12" label="全部订单"></u-icon>
			</view>
		</view>
	</view>
	
	<!-- 第三层视图 -->
	<view class="panel-list3">
		<view class="panel-item3">
			<u-cell-group>
				<u-cell title="收货地址" :isLink="true"></u-cell>
				<u-cell title="联系客户" :isLink="true"></u-cell>
				<u-cell title="退出登录" @click="logout" :isLink="true"></u-cell>
			</u-cell-group>
		</view>
	</view>
  </view>
</template>

<script>
import { mapState,mapMutations } from 'vuex'


	export default {
		name:"my-userInfo",
		data() {
			return {
				
			};
		},
		computed:{
			...mapState('m_user', ['userinfo']),
		},
		methods:{
			...mapMutations('m_user', ['updateUserInfo','updateToken','updateAddress']),
			logout(){

				this.updateUserInfo({})
				this.updateToken('')
				this.updateAddress({})
				this.$u.toast("退出成功！")
			}
		}
	}
</script>

<style lang="scss">
	.my-userinfo-container {
	  height: 100%;
	  // 为整个组件的结构添加浅灰色的背景
	  background-color: #f4f4f4;

	  .top-box {
		height: 400rpx;
		background-color: #c00000;
		display: flex;
		flex-direction: column;
		align-items: center;
		justify-content: center;

		.avatar {
		  display: block;
		  width: 90px;
		  height: 90px;
		  border-radius: 45px;
		  border: 2px solid white;
		  box-shadow: 0 1px 5px black;
		}

		.nickname {
		  color: white;
		  font-weight: bold;
		  font-size: 16px;
		  margin-top: 10px;
		}
	  }
	  
	  .panel-list1 {
		  position: relative;
		  display: flex;
		  justify-content: center;
		  align-items: center;
		  height: 60px;
		  top: -10px;
		  .panel-item1 {
			  width: 90%;
			  display: flex;
			  border-radius: 8px;
			  margin-bottom: 8px;
			  background-color: white;
			  justify-content: space-around;
			  .item1 {
				  font-size: 13px;
				  // flex: 1;
				  display: flex;
				  flex-direction: column;
				  align-items: center;
				  padding: 10rpx 20rpx;
			  }
		  }
	  }
	  .panel-list2 {
		  display: flex;
		  justify-content: center;
		  margin-top: -10px;
		  .panel-item2 {
			  
			  display: flex;
			  flex-direction: column;
			  width: 90%;
			  border-radius: 8px;
			  background-color: white;
			  .panel-title2 {
				  font-size: 16px;
				  width: 100%;
				  height: 30px;
				  line-height: 30px;
				  padding: 10rpx 0;
				  margin-left: 30rpx;
			  }
			  .panel-order {
				  border-top: 1px solid #efefef;
				  padding: 10rpx 10rpx;
				  display: flex;
				  justify-content: space-around;
				  align-items: center;
			  }
		  }
	  }
	  .panel-list3 {
		  display: flex;
		  justify-content: center;
		  margin-top: 10px;
		  .panel-item3 {
			  width: 90%;
			  border-radius: 8px;
			  background-color: white;
		  }
	  }
	}
</style>
